<template>
  <f7-page class="bg-color-white" @page:afterin="init">
    <f7-navbar :title="$t('m.cr1')" back-link=" ">
      <f7-nav-right>
        <a href="#" class="link" @click="sheetOpened = !sheetOpened">
          <i class="iconfont icon-shaixuan1"></i>
        </a>
      </f7-nav-right>
    </f7-navbar>

    <no-content-tips v-if="logs.length === 0"></no-content-tips>

    <div class="list-box" v-else>
      <ul>
        <li class="my-card" v-for="(item,index) in logs" :key="index" @click="viewDetails(filterItems.ctc_id, item.id)">
          <h3>{{item.ctc_id === '2'?$t('m.cr3'):$t('m.cr2')}}USDT <f7-link>{{item.status | c2cOrderStatus}}<f7-icon f7="chevron_right"></f7-icon></f7-link></h3>
          <f7-row>
            <f7-col>{{$t('m.cr4')}}</f7-col>
            <f7-col>{{$t('m.ct15')}}(USDT)</f7-col>
            <f7-col>{{$t('m.ct21')}}(cny)</f7-col>
          </f7-row>
          <f7-row>
            <f7-col>{{$moment(item.add_time * 1000).format('YYYY-MM-DD')}}</f7-col>
            <f7-col>{{item.num}}</f7-col>
            <f7-col>{{item.total}}</f7-col>
          </f7-row>
          <h4>{{item.sell_user.nick || item.sell_user.username}}</h4>
        </li>
      </ul>
    </div>

    <van-popup v-model="sheetOpened" position="top" slot="fixed">
      <div class="filter-popup">
        <div class="content-padding">
          <select-item :title="$t('m.cr5')" v-model="filterItems.ctc_id">
            <select-item-child :value="2">{{$t('m.ct18')}}</select-item-child>
            <select-item-child :value="1">{{$t('m.ct19')}}</select-item-child>
          </select-item>
          <select-item :title="$t('m.cr11')" v-model="filterItems.status">
            <select-item-child :value="0">{{$t('m.cr6')}}</select-item-child>
            <select-item-child :value="6">{{$t('m.cr7')}}</select-item-child>
            <select-item-child :value="1">{{$t('m.cr8')}}</select-item-child>
            <select-item-child :value="2">{{$t('m.cr9')}}</select-item-child>
            <select-item-child :value="3">{{$t('m.cr10')}}</select-item-child>
          </select-item>
        </div>

        <f7-toolbar bottom class="filter-toolbar">
          <f7-button color="white" @click="resetFilter">{{$t('m.ct13')}}</f7-button>
          <f7-button color="blue" class="no-border-radius" @click="handleFilter">{{$t('m.ct14')}}</f7-button>
        </f7-toolbar>
      </div>
    </van-popup>
  </f7-page>
</template>

<script>
  import SelectItem from "../ajComponents/selectItem/select-item";
  import SelectItemChild from "../ajComponents/selectItem/item-child";
  import { getMyTradeList } from "../api/find";

  export default {
    name: "c2c-record",
    data () {
      return {
        sheetOpened: false,
        filterItems: {
          status: 0,
          ctc_id: undefined
        },
        logs: []
      }
    },
    mounted() {
      // this.init();
    },
    methods: {
      init() {
        getMyTradeList(this.filterItems).then(res => {
          this.logs = res.data;
        })
      },
      resetFilter() {
        this.filterItems.ctc_id = 2;
        this.filterItems.status = 0;
      },
      handleFilter() {
        this.init();
        this.sheetOpened = false;
      },
      viewDetails(ctc_id, trade_id) {
        this.$f7router.navigate('/c2c-order-details/', {context: {nextParams: {ctc_id, trade_id}}})
      }
    },
    components: {
      SelectItem,
      SelectItemChild
    }
  }
</script>

<style scoped lang="scss">
  .filter-popup {
    padding-top: 44PX;
    /*height: 400px;*/
    background-color: #fff;
    .content-padding {
      padding-bottom: $padding;
    }
  }
  .list-box {
    ul {
      li {
        padding: $padding;
        box-shadow: 0 5px 10px 0 rgba(0,0,0,.05);
        margin-bottom: $padding20;
        h3 {
          display: flex;
          color: $mainColor;
          justify-content: space-between;
          padding-bottom: $padding;
          .link {
            color: $dieColor;
          }
        }
        > div {
          color: $color8b;
          margin-bottom: $padding20;
          &:nth-of-type(1) {
            color: $colorGrey;
          }
          .col{
            &:nth-child(2) {
              text-align: center;
            }
            &:last-child {
              text-align: right;
            }
          }
        }
        h4 {
          font-size: 28px;
        }
      }
    }
  }
</style>
